<!doctype html>
<html>

	<head>
		<title>填写信息</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/style.css">
		<style>
			.ul li .am-ucheck-checkbox:checked+.am-ucheck-icons,
			.am-ucheck-radio:checked+.am-ucheck-icons {
				color: #ff7cad;
			}
			
			.ul li .am-ucheck-checkbox:hover:not(.am-nohover):not(:disabled)+.am-ucheck-icons,
			.am-ucheck-radio:hover:not(.am-nohover):not(:disabled)+.am-ucheck-icons {
				color: #ff7cad;
			}
			
			.xz .am-ucheck-checkbox:checked+.am-ucheck-icons,
			.am-ucheck-radio:checked+.am-ucheck-icons {
				color: #69bae0;
			}
			
			.xz .am-ucheck-checkbox:hover:not(.am-nohover):not(:disabled)+.am-ucheck-icons,
			.am-ucheck-radio:hover:not(.am-nohover):not(:disabled)+.am-ucheck-icons {
				color: #69bae0;
			}
			.turn-pink{
				background:#ff7cad!important;
			}
			#customer_ul .customer_list[peer_id^="t"]>div:first-child:after{content:"(临时)";color:red}
		</style>
	</head>

	<body>
		<div class="containter" style="height: 100%;">
			<header data-am-widget="header" class="am-header am-header-default">
				<div class="am-header-left am-header-nav">
					<a href="option_date.html">
						<img src="assets/images/left.png">
					</a>
				</div>
				<h1 class="am-header-title" style="margin:0 14%">
      填写信息
    </h1>
			</header>
			
			<div class="information" style="min-height:100%;">
				<div style="height: 4rem;width: 100%;"></div>
				<div class="in-head">
					<h2>埃及八天双飞团</h2>
					<span style="display: block;">出发日期：<span id="departDay">0000-00-00</span></span>
					<span style="display: block;">出游人数：<span id="total_num">0</span>人</span>
				</div>
				<div class="in-center">
					<h2><img src="assets/images/tu1.png" alt="">游客信息[<span id="before1">0</span>/<span id="after1">1</span>] <a class="select_tourist">选择游客</a></h2>
					<ul id="customer_ul">
						<!--<li class="customer_list">
							<div style="float: left;text-align: center;">wwuben</div>
							<div style="float: right;text-align: center;">157330000000</div>
						</li>-->
					</ul>
				</div>
				<div class="in-nav">
					<h2><img src="assets/images/tu3.png" alt="">联系人信息</h2>
					<ul class="ul1">
						<li><span class="li_span">姓名</span><input style="text-align: center;" type="text" placeholder="必填,姓名" required="required" id="real_name" maxlength="6"></li>
						<li><span class="li_span">手机号码</span><input type="text" id="linkman_phone" maxlength="11"/></li>
						<!--<li>
							<span class="li_span">证件类型</span>
							<div id="list_right">
								<span style="position: relative;text-align: center;" id="id_type" idtype="sfz">
									<div id="car_typ">身份证</div>
									<ul class="ul2" id="id_select2">
								    	<!--<li id="sfz">身份证</li>
								    	<li id="ga">港澳通行证</li>
								    	<li id="passport">护照</li>
								    	<li id="tw">台湾通行证</li>-->
									<!--</ul>	
								</span>
								<b style="position: absolute;right: 0;top:0">▼
								</b>
								
							</div>
						</li>-->
						<li><span class="li_span">邮箱号码</span><input style="text-align: center;" type="text" placeholder="填写邮箱号码（选填）" id="id_num" maxlength="18"/></li>
					</ul>
				</div>
				
				
				<!-- <div class="in-nav in-next">
      <h2><img src="assets/images/tu4.png" alt="">保险信息</h2>
      <ol>
        <li>
          <span>出境旅游意外险<br>年龄：1-80<font>￥30</font>元/人</span>
          <div class="shuzi">
            <button type="button" class="minus">-</button>
            <input type="text" class="am-num-text" value="0" />
            <button type="button" class="plus">+</button>
          </div>
          <div class="clear"></div>
        </li>
        <li>
          <span>出境旅游意外险<br>年龄：1-80<font>￥30</font>元/人</span>
          <div class="shuzi">
            <button type="button" class="minus">-</button>
            <input type="text" class="am-num-text" value="0" />
            <button type="button" class="plus">+</button>
          </div>
          <div class="clear"></div>
        </li>
        <li>
          <span>出境旅游意外险<br>年龄：1-80<font>￥30</font>元/人</span>
          <div class="shuzi">
            <button type="button" class="minus">-</button>
            <input type="text" class="am-num-text" value="0" />
            <button type="button" class="plus">+</button>
          </div>
          <div class="clear"></div>
        </li>
      </ol>
    </div> -->
				<!-- <p><img src="assets/images/tu5.png">发票<a href="invoice.html">不需要<img src="assets/images/right.png" alt=""></a></p> -->
				<!-- <p><img src="assets/images/tu5.png">特殊要求</p>
    <textarea> 如您有特殊要求，请在这里告诉我们</textarea> -->
				<label class="am-checkbox xz">
      <input type="checkbox" value="" data-am-ucheck checked id="check_inpt"/>
    我已阅读并接受预定须知、合同、保险等条款。
    </label>
				<div style="height:4rem"></div>
				<div class="in-footer">
					总价：
					<font>￥4666</font>
					<a href="#" data-am-modal="{target: '#fy'}">费用明细</a>
					<button class="tijiao" id="sub_btn">提交订单</button>
				</div>
			</div>
			<!--查看明细状况-->
			<div class="am-popup" id="fy" style="bottom:4rem!important; height:11rem;">
				<div class="am-popup-inner">
					<ul class="ul">
						<li>出团费用<span class="total_price">￥4666</span></li>
						<li><span class="adult_num" style="float: left;">成人×1</span>
							<font class="adult_price">￥4666</font>
						</li>
						<li><span class="elder_num" style="float: left;">长者×1</span>
							<font class="elder_price">￥4666</font>
						</li>
						<li><span class="baby_num" style="float: left;">儿童占床×1</span>
							<font class="baby_price">￥4666</font>
						</li>
						<li><span class="child_num" style="float: left;">儿童不占床×1</span>
							<font class="child_price">￥4666</font>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="toast" style="top:-3.5rem"></div>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/allUse.js"></script>
		<script src="assets/js/jquery.md5.js"></script>
		<script>
			// 数量减
			TotalPrice();
			$(".minus").click(function() {
				var t = $(this).parent().find('.am-num-text');
				t.val(parseInt(t.val()) - 1);
				if(t.val() <= 0) {
					t.val(0);
				}
				TotalPrice();
			});
			// 数量加
			$(".plus").click(function() {
				var t = $(this).parent().find('.am-num-text');
				t.val(parseInt(t.val()) + 1);
				if(t.val() <= 1) {
					t.val(1);
				}
				TotalPrice();
			});

			function TotalPrice() {
				var oprice = 0;
				$(".GoodsCheck").each(function() {
					if($(this).is(":checked")) {
						var price = parseFloat($(this).parents(".one-goods").find(".GoodsPrice").text());
						var num = parseInt($(this).parents(".one-goods").find(".am-num-text").val());
						var total = price * num;
						oprice += total;
					}
					$(".ShopTotal").text(oprice.toFixed(2));
					
				});
			};
		</script>
	</body>

	<!--8.4提交订单-->

	<script type="text/javascript">
		$(document).ready(function(){
			//以下证件类型
//			$.ajax({
//					type: "get",
//					url: url_enter+"/api/get_identity",
//					headers: headers,
//                  success: function(data) {
//                  	$('#id_select2').append('<li id="sfz">'+data.data.tourist_list[0].ity_name+'</li><li id="ga">'+data.data.tourist_list[1].ity_name+'</li><li id="passport">'+data.data.tourist_list[2].ity_name+'</li><li id="tw">'+data.data.tourist_list[3].ity_name+'</li>')
//                  },
//                  error: function(xhr, status, thrown) {
//						console.log(xhr);
//					}
//                 
//      	})
//			
			if(document.referrer==sessionStorage.getItem("tourist_url")){//从选择游客跳过来 保留页面信息
				var formInfo=JSON.parse(sessionStorage.getItem("formInfo"))
//				var formInfo={
//						name:$("#real_name").val(),
//						phone:$("#linkman_phone").val(),
//						id_num:$("#id_num").val()
//					};
				$("#real_name").val(formInfo.name);
				$("#linkman_phone").val(formInfo.phone);
				$("#id_num").val(formInfo.id_num);
		}
			
			var regn = /^[0-9]*$/
				$("#linkman_phone").on("keyup",function(){
					if(!regn.test($(this).val())){
						$(this).val($(this).val().substring(0,$(this).val().length-1))
					}
				})
//			slideDown();
//			function slideDown(){
//				var listRight=document.getElementById("list_right");
//						var idSelect=document.getElementById("id_select2");
//						var li=idSelect.getElementsByTagName("li");
//						var id_type=document.getElementById("id_type")
//					listRight.onclick=function(event){
//						console.log(idSelect.style.display)
//						idSelect.style.display=idSelect.style.display=="block" ? "none" : "block";	
//						var evt=event || window.event;
//						if(evt.attachEvent){
//							evt.cancelBubble=true;	
//						}else{
//							evt.stopPropagation()	
//						}
//						for(var i=0;i<li.length;i++){						
//							li[i].onclick=function(){
//								$("#car_typ").html(this.innerHTML)
//								
//								$("#id_type").attr("idtype",$(this).attr("id"))
//							}
//						}
//					}
//					document.onclick=function(){
//						idSelect.style.display="none"	
//					}
//			}
			
			turePink();	
			$("input").on('input propertychange',function(){
				turePink();	
			});
			$("#check_inpt").on("change",function(){
				console.log(2112)
				turePink();	
			})
			if(JSON.parse(decodeURIComponent(sessionStorage.getItem("form_option_date")))){
				var option_data_arr=JSON.parse(decodeURIComponent(sessionStorage.getItem("form_option_date")))
			}
			console.log(option_data_arr)
			var dePartDay=option_data_arr.dePartDay;//出发日期
   			var stock=option_data_arr.stock;//库存
   			var total_num=option_data_arr.total_num;//出行人数
   			var adult_price=parseFloat(option_data_arr.adult_price).toFixed(2);
   			var child_price=parseFloat(option_data_arr.child_price).toFixed(2);
   			var baby_price=parseFloat(option_data_arr.baby_price).toFixed(2);
   			var elder_price=parseFloat(option_data_arr.elder_price).toFixed(2);
   			var adult_num=option_data_arr.adult_num;
   			var child_num=option_data_arr.child_num;
   			var baby_num=option_data_arr.baby_num;
   			var elder_num=option_data_arr.elder_num;
   			var line_id=option_data_arr.line_id;
   			var title_name=option_data_arr.title_name;
   			var total_price=parseFloat(option_data_arr.total_price).toFixed(2);
   			var team_id=option_data_arr.team_id;
   			calc()
   			function calc(){
   				$("#before1").html($(".customer_list").length);
   				console.log($(".customer_list").length)
				$("#after1").html(total_num)
   			}
   			function turePink(){//决定提交按钮是否变色
				console.log($(".customer_list").length)
//				console.log(Boolean(parseInt($("#before1").html())==parseInt($("#after1").html())))
				if($("#real_name").val() && $("#linkman_phone").val()  && $("#before1").html()==$("#after1").html() && $("#check_inpt").is(":checked")){//表单全部填过了
					$("#sub_btn").addClass("turn-pink");
					
				}else{
					$("#sub_btn").removeClass("turn-pink");
				};
			};
   			//添加 游客信息
   			if(sessionStorage.getItem('customer_list')){
// 				console.log(sessionStorage.getItem('customer_list'))
   				var arr1=JSON.parse(sessionStorage.getItem('customer_list'));
   				console.log(arr1);
   				if((!$('#real_name').val())&&(!$('#linkman_phone').val())){
					$('#real_name').val(arr1[0].add_customer.substr(3));
					$('#linkman_phone').val(arr1[0].phone_num);
				}
   				for(var i=0;i<arr1.length;i++){
   					$("#customer_ul").append('<li class="customer_list" peer_id="'+arr1[i].peer_id+'"><div style="float: left;text-align: center;">'+arr1[i].add_customer+
   						'</div><div class="del" style="float: right;text-align: center;margin-left:10px;color:red;cursor:pointer;">删除</div><div style="float: right;text-align: center;">'+arr1[i].phone_num+'</div></li>')
   				};
   				$('#customer_ul').on('click','.del',function(e){
   					window.event? window.event.cancelBubble = true : e.stopPropagation();
   					var r=window.confirm('确定要删除这条游客信息吗？');
   					if(r){
   						var index=$('#customer_ul li').index($(this).parent());
   						console.log(index);
   						arr1.splice(index,1);
   						sessionStorage.setItem('customer_list',JSON.stringify(arr1));
   						$(this).parent().remove();
   						$('#before1').html($('#before1').html()-1);
   						turePink();
   					}else{return}
   				});
   				
   				calc();
   				console.log($('#before1').html()==$('#after1').html());
   				if($('#before1').html()==$('#after1').html()){
   					$('#customer_ul .customer_list').on('click',function(){
   					var index=$('#customer_ul li').index($(this));
   					$('#real_name').val(arr1[index].add_customer.substring(3));
   					$('#linkman_phone').val(arr1[index].phone_num);
   					var formInfo={
						name:"",
						phone:"",
						id_num:""
					};
					formInfo.name=$("#real_name").val();
					formInfo.phone=$("#linkman_phone").val();
					formInfo.id_num=$("#id_num").val();
					window.sessionStorage.setItem("formInfo",JSON.stringify(formInfo));
   				})
   				}
   				
   				
   				turePink();
// 				console.log(peer_id);
// 				console.log(GetQueryString("peer_id"))
   			}
   			console.log(total_price);
   			$(".in-head h2").html(title_name);
   			$("#departDay").html(dePartDay);
   			$("#total_num").html(total_num);
   			$(".in-footer font").html("￥"+total_price)
   			$(".total_price").html("￥"+total_price)
   			$(".adult_num").html("成人×"+adult_num);
   			$(".baby_num").html("儿童不占床×"+baby_num);
   			$(".child_num").html("儿童占床×"+child_num);
   			$(".elder_num").html("长者×"+elder_num);
   			$(".adult_price").html("￥"+adult_price);
   			$(".baby_price").html("￥"+baby_price);
   			$(".elder_price").html("￥"+elder_price);
   			$(".child_price").html("￥"+child_price);
			$(".select_tourist").click(function(){
				
				if(!token){
					var formInfo={
						name:"",
						phone:"",
						id_num:""
					};
					formInfo.name=$("#real_name").val();
					formInfo.phone=$("#linkman_phone").val();
					formInfo.id_num=$("#id_num").val();
					window.sessionStorage.setItem("formInfo",JSON.stringify(formInfo));
					window.location.href="login.html";
				}else{
					var need_num=$("#after1").html();
					var formInfo={
						name:"",
						phone:"",
						id_num:""
					};
					formInfo.name=$("#real_name").val();
					formInfo.phone=$("#linkman_phone").val();
					formInfo.id_num=$("#id_num").val();
					window.sessionStorage.setItem("formInfo",JSON.stringify(formInfo))
					window.location.href="tourist.html";
				};
			});
		});
//		$(".tijiao").click(function() {
			
//		});
		var flagthis=true//防止重复提交
		$("#sub_btn").click(function(){
			var rxPhone = /^1[3|4|5|7|8][0-9]{9}$/;
			if(JSON.parse(decodeURIComponent(sessionStorage.getItem("form_option_date")))){
				var option_data_arr=JSON.parse(decodeURIComponent(sessionStorage.getItem("form_option_date")))
			}
			var linkman_name=$.trim($("#real_name").val());
			var linkman_phone=$.trim($("#linkman_phone").val());
			var linkman_idtype=$.trim($("#id_type").attr("idtype"));
			var linkman_idnum=$.trim($("#id_num").val());
			if(linkman_name===""){
				showToast("请输入联系人姓名")
				return;
			}else if(linkman_phone===""){
				showToast("请输入手机号码")
				return;
//			}else if(linkman_idnum===""){
//				showToast("请输入证件号码")
//				return;
			}else if(parseInt($("#before1").html())!=parseInt($("#after1").html())){
				showToast("请添加旅客信息");
				return;
			}else if($("#check_inpt").is(":checked")==false){//错了
				showToast("请阅读协议");
				return;
			}else if(!rxPhone.test(linkman_phone)){
				showToast("手机号码有误");
				return
			}else if(!flagthis){
				return;
			}else{
				flagthis=false
				var dePartDay=option_data_arr.dePartDay;//出发日期
	   			var stock=option_data_arr.stock;//库存
	   			var total_num=option_data_arr.total_num;//出行人数
	   			var adult_price=parseFloat(option_data_arr.adult_price).toFixed(2);
	   			var child_price=parseFloat(option_data_arr.child_price).toFixed(2);
	   			var baby_price=parseFloat(option_data_arr.baby_price).toFixed(2);
	   			var elder_price=parseFloat(option_data_arr.elder_price).toFixed(2);
	   			var adult_num=option_data_arr.adult_num;
	   			var child_num=option_data_arr.child_num;
	   			var baby_num=option_data_arr.baby_num;
	   			var elder_num=option_data_arr.elder_num;
	   			var line_id=option_data_arr.line_id;
	   			var title_name=option_data_arr.title_name;
	   			var total_price=parseFloat(option_data_arr.total_price).toFixed(2);
				var team_id=option_data_arr.team_id;
				var peer_id=""
				for(var i=0;i<$(".customer_list").length;i++){
					peer_id+=$(".customer_list").eq(i).attr("peer_id")+","
				};
				peer_id=peer_id.substring(1,peer_id.length-1);
				var req='{"team_id":'
				+team_id+',"adult_num":'
				+adult_num+',"child_num":'
				+child_num+',"baby_num":'
				+baby_num+',"elder_num":'
				+elder_num+',"adult_price":'
				+adult_price+',"child_price":'
				+child_price+',"baby_price":'
				+baby_price+',"elder_price":'
				+elder_price+',"total_price":'
				+total_price+',"peer_id_list":"'
				+peer_id+'","names":"'
				+$("#real_name").val()+'","phone_num":"'
				+$("#linkman_phone").val()+'","card_type":"","card_no":"'
				+$("#id_num").val()+'"}';
				//联系人、游客信息json
				var cl=JSON.parse(sessionStorage.getItem('customer_list'));
				var touristMessage;
				var req1={'num':[{'elder_num':elder_num,'type':4,'elder_price':elder_price},{'baby_num':baby_num,'type':0,'baby_price':baby_price},{'child_num':child_num,'type':1,'child_price':child_price},{'adult_num':adult_num,'type':3,'adult_price':adult_price}],'total_price':total_price
						,'team_id':team_id,'contact':{'contactName':$("#real_name").val(),'contactPhone':$("#linkman_phone").val(),'contactMail':$("#id_num").val()}
				        ,'tourist':[]};
				for(var i=0;i<cl.length;i++){
				    touristMessage={'touristName':cl[i].add_customer.substring(3),'touristPhone':cl[i].phone_num,'tourist_peer_id':cl[i].peer_id,
				        'tourist_card_type':cl[i].card_type,'tourist_card_no':cl[i].card_no,'tourist_gender':cl[i].gender,'tourist_birthday':cl[i].birthday}
					console.log(touristMessage);
					req1.tourist.push(touristMessage);
				}
				req1=JSON.stringify(req1);
				console.log(req1);
				console.log(req);
				
				$.ajax({
					type: "post",
					url: url_enter+"/apk/booking_order",
					//url:"http://172.16.3.3:8080/api/orders",
					headers: headers,
					data: {
						//              form-urlencoded格式参数
						//              “req”: “xxxxxx” // json字符串，使用url encoded
						//						{
						//		“team_id”:1,//出团ID序列号
						//		“adult_num”:2,// 成人游客人数
						//		“child_num”:1,// 不占床儿童游客人数
						//		“adult_price”: 2000.00, // 成人价格 float
						//“child_price”: 1800.00, // 儿童价格 float
						//“total_price”: 5800.00, // 总价格 float
						//“peer_id_list”:“1001,1002,……”// 参团的游客id列表(string)，游客列表可由get_my_peer_list获取
						//		“names”:”张三”,//联系人姓名，字符串类型（String）
						//		“phone_num”:”13523563467”,//联系人电话，字符串类型（String）
						//		“card_type”:”xxx”,// 联系人证件类型 sfz|ga|tw|passport
						//		“card_no”:”1311345199803302344”// 联系人证件号码
						//}
						"req":encodeURIComponent(req1)
	
					},
					success: function(data, status, xhr) {
						//无  返回
						console.log(token);
						console.log(data);
						if(data.result==1){
							var tit_req='{"adult_num":'
								+adult_num+',"total_price":'
								+total_price+',"names":"'
								+$("#real_name").val()+'","card_no":"'
								+$("#id_num").val()+'","title":"'
								+$(".in-head h2").html()+'","time_start":"'
								+$("#departDay").html()+'","total_num":"'
								+$("#total_num").html()+'","order_no":"'+data.data.order_no
								+'"}';
								console.log(tit_req)
							window.sessionStorage.setItem("from_pay",tit_req);
						//	alert("填写成功");
							
						  window.location.href="pay.html";
						}else{
							alert(data.message);
						}
						flagthis=true;
					},
					error: function(xhr, status, thrown) {
						console.log(xhr);
					}
				});
			};
			
		})
	</script>

</html>